<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_fetch网络请求</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /*
        面试题：ajax，axios，fetch三者的区别
        fetch：ES6之后推出的网络请求方式，语法基于Promise，号称ajax的替代，代码结构上比ajax简单的多；但是，fetch的内部实现的网络请求核心对象不是XMLHttpRequest，而是ES规范里的新的实现方式。fetch不是一个插件，而是原生的JS实现的网络请求
        */
        let app = document.getElementById("app")
        let {Fragment,Component} = React

        class App extends Component{
            render(){
                return <fieldset>
                    <legend><h2>Fetch网络请求</h2></legend>
                    <button onClick={()=>this.fetchGet1()}>无参的fetchGet</button>
                    <button onClick={()=>this.fetchGet2()}>传参的fetchGet</button>
                    <button onClick={()=>this.fetchPost()}>fetchPost</button>
                </fieldset>
            }
            // 封装一个处理fetch请求传递参数的方法
            handleGetParams(data){
                if(data){
                    let paramsArr = [];
                    Object.keys(data).forEach(key=>{
                        paramsArr.push(key+"="+data[key]);
                    })
                    return paramsArr.join('&');
                }
                return ''
            }
            fetchGet1(){
                fetch("http://127.0.0.1:4567/fGet").then(response=>{
                    //发起fetch请求的第一个then获取到的是一个response对象，该对象里无法直接获取返回的数据，但是该对象里有本次请求的状态数据，如:状态码，请求状态文本等；如果想要获取到本次请求的数据，需要对该对象进行一次处理，并将处理的结果返回
                    console.log(response);
                    /*
                    处理response对象的方法
                    blod() 二进制对象
                    text() 文本值
                    formData() 表单数据对象
                    json() json解析的结果
                    */
                    return response.json()
                }).then(data=>{
                    console.log(data)
                }).catch(error=>{
                    console.log(error);
                })
            }
            fetchGet2(){
                let paramsStr = this.handleGetParams({username:"张三",password:1234432,isLogin:true})
                console.log(paramsStr)
                // 发起get请求时如果需要传递参数，直接将参数拼接到网址的后面
                fetch("http://127.0.0.1:4567/fGet?"+paramsStr)
                    .then(response=>response.json())
                    .then(data=>console.log(data))
                    .catch(error=>console.log(error))
            }
            fetchPost(){
                fetch("http://127.0.0.1:4567/fPost",{
                    method:'POST', //GET，POST，DELETE，PUT
                    headers:{
                        // 'Content-Type':'application/json'
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    /*credentials:'include', //自动携带cookie*/
                    // body:JSON.stringify({name:'李四',sex:'男'})
                    body:this.handleGetParams({name:'李四',sex:'男'})
                }).then(response=>{
                    return response.json()
                }).then(data=>{
                    console.log(data);
                }).catch(error=>{
                    console.log(error);
                })
            }
        }

        ReactDOM.render(<App></App>,app)
    </script>
</body>
</html>